<template>
    <div class="main w1200">
        <p><label for="user"><i class="error">*</i>账号：</label><input @blur="foucs" class="input-text" type="text" name="user" v-model="username"><i class="error msg">{{umsg}}</i></p>
        <p><label for="pass"><i class="error">*</i>密码：</label><input @blur="foucs" class="input-text" type="password" name="user" v-model="password"><i class="error msg">{{pmsg}}</i></p>
        <p><input class="input-button" type="button" value="登录" @click="login"></p>
    </div>
</template>
<script>

export default {
    name:'login',
    layout:'index',
    head: {
        title: '登录'
    },
    data(){
        return{
            username:'',
            password:'',
            umsg:'',
            pmsg:''
        }
    },
    methods:{
        login(){
            const user=this.username.replace(/\s+/g, ''),
                  pass=this.password.replace(/\s+/g, '');
            if(user==''){
                this.umsg='账号不得为空';
                return false;
            }else if(pass==''){
                this.pmsg='密码不得为空';
                return false;
            }else{
                this.$store.dispatch('login',{
                    username:user,
                    password:pass
                }).then(()=>{
                    this.$router.push('/')
                })    
            }
        },
        foucs(){
            this.umsg=this.pmsg='';
        }
    }
}
</script>
<style scoped>
    .main{
        min-height: 9.259259rem;
        text-align: center;
    }
    .main p{
        height: .740741rem;
        line-height: .740741rem;
        margin:.277778rem 0;
    }
    .error{
        color:red;
        margin: 0 .185185rem;
        font-style: normal;
    }
    .msg{
        width:1.851852rem;
        display:inline-block;
    }
    .input-text{
        text-align: left;
        text-indent: .185185rem;
    }
    .input-button{
        cursor: pointer;
        margin-left: -1.111111rem;
    }
    .input-text,.input-button{
        width:3.703704rem;
        height:.648148rem;
    }
</style>